<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>无标题文档</title>
        <style type="text/css">
            *{
            	margin: 0;
            	padding: 0;
            }
            body{
            	padding: 100px;
            }
            ul,li{
            	list-style: none;
            }
            ul{
            	width: 600px;
            	height: 40px;
            	border: 1px solid #7c7c7c;
            }
            ul li{
            	width: 200px;
            	height: 40px;
            	text-align: center;
            	line-height: 40px;
            	box-sizing: border-box;
            	border: 1px solid gray;
            	float: left;
            }
            .conten{
            	width:600px;
            	height:100px;
            	border: 1px solid #7c7c7c;
            	border-top:none;
            	position: relative;
            }
            .conten div{
            	width:600px;
            	height:100px;
            	border: 1px solid #7c7c7c;
            	position: absolute;
            	border-top:none;
            	display: none;
            }
        </style>
    </head>
    <body> 
    	<ul id="box">
    		<li>周恩来</li>
    		<li>朱德</li>
    		<li>毛泽东</li>
    	</ul>
    	<div class="conten" id="content">
    		<div style="display: block;">1</div>
    		<div>2</div>
    		<div>3</div>
    	</div>
       <script type="text/javascript">
			var oBox = document.getElementById('box');
			var oLi = oBox.children;
			var oConten = document.getElementById('content');
			var oDiv = oConten.children;
			
			for(var i=0;i<oLi.length;i++){
				oLi[i].index=i;
//				alert(index)
				oLi[i].onclick=function(){
					//oDiv[i].style.display="none";
					//alert(this.index);
					//oDiv[this.index].style.display="block";
					for(var x=0;x<oDiv.length;x++){
						oDiv[x].style.display="none";
					}
					oDiv[this.index].style.display="block";
				}
			};
				
				  
       </script>

    </body>
</html>